<template>
	<view>
		<!-- <canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas> -->
		<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas>
		<u-popup v-model="show" mode="center" :custom-style="{background:'transparent'}" :closeable="true" :width="'90%'" :borderRadius="20" @close="closePoster">
			<view class="tui-poster__box">
				<!-- <image src="/static/images/layout/icon_popup_closed.png" class="tui-close__img" @tap.stop="hideModal"></image> -->
				<view class="tui-poster__scroll">
					<image :src="posterImg" v-if="posterImg" class="tui-poster__img" mode="widthFix"></image>
				</view>
				<u-button :custom-style="{width:'380rpx',height:'70rpx',background:'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)',fontSize:'28rpx',color:'#FFFFFF'}" shape="circle" :ripple="true" @click="savePoster">保存图片</u-button>
				<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import poster from './wd-poster.js';
	export default {
		name: 'wdPoster',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				winWidth: 2600,
				winHeight: 2000,
				padding: [60,120,60,120],
				title: '',
				logo:'',
				qrcode:'',
				tips: '长按识别图中二维码立即约课',
				
				show: false,
				posterImg: '',
				closeFromInner: false, // value的值改变，是发生在内部还是外部
			};
		},
		watch: {
			value(val) {
				if (val) {
					this.createPoster();
				} else if(!this.closeFromInner) {
					this.closePoster();
				}
				this.closeFromInner = false;
			},
			data(val) {
				if (Object.keys(val).length !== 0) {
					let space_w = parseInt((this.winWidth - this.padding[1] - this.padding[3] - 110)/val.date.length);
					let space_h = parseInt(space_w*1.05);
					let all_height = space_h*val.time.length + 190 + 245 + 445
					this.winHeight = all_height + this.padding[0] + this.padding[2]
				}
			}
		},
		mounted() {
			let currentShop = this.$core.getCurrentShop();
			console.log(currentShop)
			this.title = currentShop.name;
			this.logo = currentShop.logo;
			this.qrcode = currentShop.qrcode
			this.value && this.createPoster();
		},
		methods: {
			// async getPosterData() {
			// 	// 如果海报标题\logo\二维码图片\扫码提示等其他数据,需要通过接口获取,可以是通过参考这个方法来调用处理
			// 	var that = this;
			// 	return await new Promise((resolve, reject) => {
			// 		var option = {};
			// 		http.common_request(that,option,function(data){
			// 			resolve(data);
			// 		})
			// 	})
			// },
			async createPoster() {
				let that = this;
				if (this.posterImg) {
					this.show = true;
					return;
				}
				uni.showLoading({
					mask: true,
					title: '图片生成中...'
				});
				
				// await this.getPosterData().then(res=>{ // 同步调用，这里处理完毕才会往下运行
				// 	that.data.XXX = res.XXX
				// })
				
				//图片需要转成本地文件才能进行绘制
				let logo = await poster.getImage(this.logo);
				let code = await poster.getImage(this.qrcode);
				// #ifdef MP-WEIXIN
				// 删除已缓存文件，防止超出存储空间大小限制[同步执行]
				await poster.removeSavedFile();
				// #endif
				if (logo && code) {
					let options = {
						canvasId: 'posterId',
						width: this.winWidth,
						height: this.winHeight,
						padding: this.padding,
						data: this.data,
						title: this.title,
						tips: this.tips,
						logo: logo,
						code: code,
					}
					poster.drawPoster(options, res => {
						uni.hideLoading();
						if (res) {
							this.posterImg = res;
							setTimeout(() => {
								this.show = true;
							}, 60);
						} else {
							this.tui.toast('生成海报失败,请稍后再试');
						}
					},that);
				} else {
					uni.hideLoading();
					this.tui.toast('生成海报图片下载失败,请稍后再试');
				}
			},
			savePoster() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImg,
					success() {
						uni.showToast({
							title: '图片保存成功'
						})
					}
				})
			},
			closePoster() {
				this.closeFromInner = true;
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tui-poster__canvas {
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}
	/deep/ .u-mode-center-box {
		background: transparent;
	}
	/deep/ .u-drawer__scroll-view {
		padding: 120rpx 0 60rpx;
		box-sizing: border-box;
		
	}
	.tui-poster__box {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tui-close__img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0;
		top: -60rpx;
	}
	
	.tui-poster__scroll {
		max-height: 70vh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tui-poster__img {
		display: block;
		width: 675rpx;
		height: auto;
		margin-bottom: 40rpx;
	}

	.tui-share__tips {
		font-size: 24rpx;
		transform: scale(0.8);
		transform-origin: center center;
		color: #ffffff;
		color: #000;
		padding-top: 12rpx;
	}
</style>
